<template>
  <section class="JobDetail__container">
    <quick-panel title="基本信息"> </quick-panel>

    <quick-panel title="任务列表">
      <quick-action-bar slot="subtitle">
        <quick-icon-button
          icon="icon-shuaxin"
          tooltip="刷新"
          @click="refresh"
        />
      </quick-action-bar>
      <quick-card-list :items="items">
        <template slot-scope="scope">
          <project-job-card :item="scope.item" :noAction="false">
            <div class="action-bar" slot-scope="scope">
              <quick-action-bar>
                <quick-icon-button
                  icon="icon-lound-speaker"
                  tooltip="汇报"
                  v-if="
                    scope.item.status != 4 &&
                    scope.item.status != 3 &&
                    scope.item.progress < 99
                  "
                  @click="JobReport(scope.item)"
                />
                <quick-icon-button
                  icon="icon-gou"
                  tooltip="完成任务"
                  v-if="scope.item.status != 4 && scope.item.status != 3"
                  @click="JobComplete(scope.item)"
                />
                <quick-icon-button
                  icon="icon-24gl-pause"
                  v-if="
                    scope.item.status != 3 &&
                    scope.item.status != 2 &&
                    scope.item.status != 4
                  "
                  tooltip="暂停任务"
                  @click="JobPause(scope.item)"
                />
                <quick-icon-button
                  icon="icon-cuowu"
                  tooltip="取消任务"
                  v-if="scope.item.status != 4 && scope.item.status != 3"
                  @click="JobCancel(scope.item)"
                />
              </quick-action-bar>
            </div>
            <template slot="reportEvent">
              <span @click="reportListEvent(scope.item)">{{
                scope.item.name
              }}</span>
            </template>
          </project-job-card>
        </template>
      </quick-card-list>
    </quick-panel>
    <quick-panel title="今日汇报">
      <quick-action-bar slot="subtitle">
        <quick-icon-button
          icon="icon-shenhetijiao"
          tooltip="日报"
          @click="oneReport"
        />
      </quick-action-bar>
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="item in reportsItem"
          :key="item.id"
          :timestamp="item.creator_name + ' 创建于 ' + item.create_date"
        >
          <div class="report">
            <div class="head">
              <div class="stage">
                <span>
                  <el-tag
                    effect="plain"
                    size="mini"
                    v-if="item.status == 3"
                    type="success"
                  >
                    {{ item.status_name }}
                  </el-tag>
                  <el-tag
                    effect="plain"
                    size="mini"
                    type="danger"
                    v-if="item.overdue == 1"
                  >
                    {{ item.overdue_name }}
                  </el-tag>
                  <el-tag
                    effect="plain"
                    size="mini"
                    type="warning"
                    v-else-if="item.danger == 1"
                  >
                    {{ item.danger_name }}
                  </el-tag>
                  <el-tag effect="plain" size="mini" v-if="item.status == 1">
                    {{ item.status_name }}
                  </el-tag>
                </span>
                <span class="progress" v-if="item.progress < 100"
                  >【进度:{{ item.progress ? item.progress : 0 }}%】</span
                >
                <span class="item_name">
                  {{ item.project_name }}
                </span>
                <span class="item_name">
                  {{ item.project_job_name }}
                </span>
              </div>
              <div class="status"></div>
            </div>
            <div class="content">
              <span class="remark"> {{ dealremark(item.remark) }}</span>
              <!-- <span class="progress"
                ><el-progress
                  :percentage="item.progress ? +item.progress : 0"
                  :stroke-width="1"
                  v-if="item.progress < 100 && item.progress > 0"
                ></el-progress
              ></span> -->
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </quick-panel>
    <project-job-report-list
      ref="ProjectJobReportListDialog"
      @reportedList="refresh"
    />
    <job-cancel ref="JobCancel" @cancel="refresh"></job-cancel>
    <job-complete ref="JobComplete" @complete="refresh"></job-complete>
    <job-pause ref="JobPause" @pause="refresh"></job-pause>
    <job-report ref="JobReport" @reported="refresh"> </job-report>
    <job-one-report ref="JobOneReport"></job-one-report>
  </section>
</template>

<script>
import ProjectJobReportList from "../ProjectJob/ProjectJobReportList.vue";
import ProjectJobCard from "../ProjectJob/ProjectJobCard.vue";
import _api from "@/common/api/project_job.js";
import _report from "@/common/api/project_job_report.js";
import moment from "moment";
import JobCancel from "./JobCancel.vue";
import JobComplete from "./JobComplete.vue";
import JobPause from "./JobPause.vue";
import JobReport from "./JobReport.vue";
import JobOneReport from "./JobOneReport.vue";
export default {
  components: {
    ProjectJobCard,
    ProjectJobReportList,
    JobCancel,
    JobComplete,
    JobPause,
    JobReport,
    JobOneReport,
  },
  props: {},

  data() {
    return {
      reportsItem: [],
      items: [],
      newDate: "",
    };
  },

  methods: {
    async getItems() {
      const result = await _api.getListAsync({
        page_size: 10,
      });

      this.items = result.data;
    },

    async getReportList() {
      try {
        const result = await _report.getListAsync({
          page_size: 999,
          begin_date: this.newDate,
          // begin_date: "2024-06-04",
        });
        this.reportsItem = result.data;
      } catch (error) {}
    },

    dealremark(remarks) {
      const arr = remarks.split("+");
      arr.splice(arr.length - 1, 1);
      const remark = arr.join("");
      return remark;
    },

    oneReport() {
      this.$refs.JobOneReport.showDialog();
    },

    JobCancel(row) {
      this.$refs.JobCancel.showDialog(row);
    },

    JobComplete(row) {
      this.$refs.JobComplete.showDialog(row);
    },

    JobPause(row) {
      this.$refs.JobPause.showDialog(row);
    },

    JobReport(row) {
      this.$refs.JobReport.showDialog(row);
    },

    reportListEvent(item) {
      this.$refs.ProjectJobReportListDialog.showDrawer(item);
    },

    refresh() {
      this.getItems();
      this.getReportList();
    },

    dealDate(item) {
      return moment(item).format("yyyy-MM-DD");
    },

    getNewDate() {
      const date = new Date();
      this.newDate = moment(date).format("yyyy-MM-DD");
    },
  },
  created() {
    this.getNewDate();
  },
  mounted() {
    this.getItems();
    this.getReportList();
  },
};
</script>

<style lang="scss" scoped>
.report {
  .head {
    display: flex;
    justify-content: space-between;

    align-items: center;
    .status {
      font-size: 1.6rem;
      font-weight: 700;
      margin-right: 10px;
    }
    .stage {
      font-weight: 400;
      margin-right: 10px;
      color: #909399;
      display: flex;
      align-items: center;
      span {
        margin-right: 4px;
      }
      .item_name {
        margin-right: 5px;
      }
      .progress {
        color: #000;
      }
      .progress::after {
      }
    }
    .user {
      margin-left: auto;
    }
  }

  .content {
    margin: 10px 0;

    .remark {
      display: flex;
      font-size: 1.5rem;
      width: 400px;
      font-weight: 600;
      color: black;
      line-height: 1.5;
      text-align: left;
    }
    .progress {
      .el-progress {
        width: 300px;
      }
    }
  }
}
</style>